<template>
  <div class="news-body-item">
    <div class="news-image" :style="{backgroundImage: 'url(' + newsItem.src + ')'}">

    </div>

    <div class="news-content">
      <span>{{newsItem.title}}</span>
      <p>{{newsItem.news}}</p>
      <time>{{newsItem.time}}</time>
    </div>
  </div>
</template>

<script>
    export default {
      name: "newsCard",
      props: {
        newsItem: {
          type: Object,
          default: () => {}
        }
      },
      data() {
        return {
          value: 'lalalla'
        }
      },
      methods: {
      }
    }
</script>

<style lang="less" scoped>
  /deep/ .el-tabs__item{
    font-size: 16px;
    font-weight: bold;
  }
  .news-body-item{
    width: 100%;
    height: 222px;
    background-color: #FFFFFF;
    display: flex;
    transition: all 0.5s;
    cursor: pointer;
    margin-top: 10px;
    .news-image{
      width: 38%;
      height: 182px;
      float: left;
      margin-left: 20px;
      margin-top: 17px;
      background-size: cover;
      background-position: center center;
    }
    .news-content{
      /*float: right;*/
      width: 62%;
      height: 100%;
      margin:23px 25px 23px 20px;
      font-weight: bold;
      > span{
        font-size: 16px;
        color: #333333;
      }
      > p{
        font-size: 14px;
        margin-top: 13px;
        color: #8E8E8E;
      }
      >time{
        margin-top: 29px;
        float: right;
        color: #8E8E8E;
      }
    }
  }
  .news-body-item:hover {
    box-shadow: #999 3px 0 7px 0;
  }
</style>
